<template>
  <el-dialog
    :visible.sync="visible"
    append-to-body
    :width="width || '50%'"
    :before-close="close"
  >
    <div slot="title" class="dialog-title">
      <span>{{ title }}</span>
    </div>
    <sections title="基本信息" class="b-cells" contentHeight="500px">
      <div style="padding: 0 20px">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          :label-position="labelPosition"
          :disabled="action.type == 'read'"
        >
          <div class="u-flex flex-wrap">
            <el-form-item
              label="路径名称"
              :label-width="formLabelWidth"
              prop="pathname"
            >
              <el-popover
                placement="right"
                width="600"
                trigger="manual"
                v-model="showTable"
              >
                <relative-path
                  :show="showTable"
                  @close="showTable = !showTable"
                  @changeCheckout="checkInfos"
                />
                <el-input
                  slot="reference"
                  v-model="form.pathname"
                  autocomplete="off"
                  type="select"
                  @focus="showTable = true"
                ></el-input>
              </el-popover>
            </el-form-item>
            <el-form-item
              label="时间"
              :label-width="formLabelWidth"
              prop="schedate"
            >
              <el-date-picker
                v-model="form.schedate"
                clearable
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="周期"
              :label-width="formLabelWidth"
              prop="period"
            >
              <el-input v-model="form.period"></el-input>
            </el-form-item>
            <el-form-item
              label="执行人"
              :label-width="formLabelWidth"
              prop="exeid"
            >
              <el-select
                v-model="form.exeid"
                placeholder="请选择执行人"
                style="width: 100%"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.workid"
                  :label="item.username"
                  :value="item.workid"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="状态"
              :label-width="formLabelWidth"
              prop="sstatus"
            >
              <el-radio-group v-model="form.sstatus">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </sections>

    <slot />

    <div slot="footer" class="dialog-footer">
      <el-button v-if="canSave" @click="close">取 消</el-button>
      <el-button type="primary" @click="dialogConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CreateMixin from "../mixins/Create";
import { addScheAPI, editScheAPI } from "@/api/pathLine";
import { getUser } from "@/api/common";
import RelativePath from "./components/RelativePath.vue";

export default {
  name: "Create",
  mixins: [CreateMixin],

  components: { RelativePath },

  props: {
    visible: { type: Boolean, default: false },
    width: { type: String },
    detail: { type: Object },

    /**配置信息 */
    action: {
      type: Object,
      default: () => {
        return { type: "save", data: {} };
      },
    },
  },

  data() {
    return {
      formLabelWidth: "100px",
      labelPosition: "top",
      winHeight: document.documentElement.clientHeight - 240 + "px",

      showTable: false,

      form: {
        pathid: null,
        period: null,
        schedate: null,
        exeid: null,
        sstatus: 0,
        pathname: null,
      },
      rules: {
        pathname: [
          { required: true, message: "请选择路径", trigger: "change" },
        ],
        sstatus: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        schedate: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        exeid: [
          {
            required: true,
            message: "请选择执行人",
            trigger: "change",
          },
        ],
        period: [
          {
            required: true,
            message: "请输入周期",
            trigger: "change",
          },
        ],
      },

      /**人员列表 */
      userList: [],
    };
  },

  computed: {
    title() {
      const type = this.action.type;
      switch (type) {
        case "save":
          return "新建";
          break;
        case "update":
          return "编辑";
          break;
        case "read":
          return "详情";
          break;
      }
    },

    canSave() {
      if (this.action.type == "read") {
        return false;
      }
      return true;
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.getUserList();
    });
  },

  watch: {
    detail: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.form = newVal;
        }
      },
    },
  },

  methods: {
    // 用户列表
    getUserList() {
      getUser().then((res) => {
        if (res.Status == 1) {
          this.userList = res.Data;
        }
      });
    },
    dialogConfirm() {
      // 编辑/新增
      if (this.canSave) {
        const request = this.action.type == "update" ? editScheAPI : addScheAPI;
        delete this.form.pathname;
        request({ ...this.form }).then((res) => {
          if (res.Status == 1) {
            this.$message.success("操作成功");
            this.$parent.refresh();
            this.$refs.form.resetFields();
          }
        });
      } else {
        // 查看
        this.close();
      }
    },
    close() {
      this.$refs.form.resetFields();
      this.$emit("close");
    },

    checkInfos(selectData) {
      this.form.pathid = selectData[0].pathid;
      this.form.pathname = selectData[0].pathname;
    },
  },
};
</script>

<style lang="scss" scoped>
/**表单*/
.el-form-item {
  margin-bottom: 10px;
  width: 45%;
}
.el-form--label-top .el-form-item__label {
  padding: 0;
}
.el-input.is-disabled ::v-deep .el-input__inner,
.el-select ::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #666;
  cursor: unset;
}

/**单选 */
::v-deep {
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #666;
  }
}
.flex-wrap {
  flex-wrap: wrap;
  justify-content: space-between;
}
.dialog-title {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
}
</style>